<!-- 详情 -->
<template>
    <div class="drawer-layout">
        <el-drawer :title="title" :visible.sync="drawer" @closed="closeCurrentDrawer" size="85%" :wrapperClosable="false">
            <div class="layout" style="position: relative">
                <div>
                    <el-form class="searchForm" :class="ifShowSearch ? '' : 'overoverflow-hidden'" :inline="true"
                        ref="searchForm" :model="searchForm" label-width="85px" size="small">
                        <div ref="formitem">
                            <el-form-item label="供货商">
                                <el-select v-model="searchForm.supplier_id" placeholder="请选择供应商" clearable>
                                    <el-option v-for="item in supplierList" :key="item.id" :label="item.supplier_name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品名称">
                                <el-input v-model="searchForm.sg_name" placeholder="请输入商品名称" clearable />
                            </el-form-item>
                            <el-form-item label="商品类目">
                                <el-select v-model="searchForm.type" placeholder="请选择商品分类" clearable>
                                    <el-option v-for="item in typeList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="创建时间">
                                <el-date-picker v-model="searchForm.time" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" clearable>
                                </el-date-picker>
                            </el-form-item>
                        </div>
                        <div class="SearchBtn">
                            <el-button type="primary" size="small" icon="el-icon-search" @click="">查询</el-button>
                            <el-button size="small" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                            <el-button size="small" :icon="ifShowSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                                @click="ifShowSearch = !ifShowSearch">{{ ifShowSearch ? '收起' : '展开' }}</el-button>
                        </div>
                    </el-form>
                </div>
                <el-divider></el-divider>
                <!-- 列表 -->
                <div style="margin-top: 20px">
                    <el-table v-loading="loading"
                        :header-cell-style="{ 'background-color': '#e5eeff', color: '#5f687c', height: '47px', fontWeight: 'normal' }"
                        highlight-current-row :max-height="tableHeight" :data="tableList" style="width: 100%">
                        <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                            :min-width="tableTheadOptions[fruit].minwidth" align="center">
                            <template slot-scope="scope">
                                <div v-if="fruit == 'supplier_name'">
                                    <!-- 供货商 -->
                                    <el-tooltip :content="scope.row.supplier_name" :disabled="isShowTooltip" effect="dark"
                                        placement="top">
                                        <div @mouseover="onMouseOver(scope.row.supplier_name)"
                                            style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                                            <span :ref="scope.row.supplier_name">{{ scope.row.supplier_name }}</span>
                                        </div>
                                    </el-tooltip>
                                </div>
                                <div v-else-if="fruit == 'goods_name'">
                                    <!-- 商品名称 -->
                                    <el-tooltip :content="scope.row.goods_name" :disabled="isShowTooltip" effect="dark"
                                        placement="top">
                                        <div @mouseover="onMouseOver(scope.row.goods_name)"
                                            style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                                            <span :ref="scope.row.goods_name">{{ scope.row.goods_name }}</span>
                                        </div>
                                    </el-tooltip>
                                </div>
                                <div v-else-if="fruit == 'inventory'">
                                    <!-- 产品类型 -->
                                    <span v-if="scope.row.category1_name">{{ scope.row.category1_name }}</span>
                                    <el-divider v-if="scope.row.category2_name" direction="vertical"></el-divider>
                                    <span v-if="scope.row.category2_name">{{ scope.row.category2_name }}</span>
                                    <el-divider v-if="scope.row.category3_name" direction="vertical"></el-divider>
                                    <span v-if="scope.row.category3_name">{{ scope.row.category3_name }}</span>
                                    <el-divider v-if="scope.row.category4_name" direction="vertical"></el-divider>
                                    <span v-if="scope.row.category4_name">{{ scope.row.category4_name }}</span>
                                </div>
                                <div v-else-if="fruit == 'product_code'">
                                    <!-- 商品编号 -->
                                    <el-tooltip :content="scope.row.product_code" :disabled="isShowTooltip" effect="dark"
                                        placement="top">
                                        <div @mouseover="onMouseOver(scope.row.product_code)"
                                            style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                                            <span :ref="scope.row.product_code">{{ scope.row.product_code }}</span>
                                        </div>
                                    </el-tooltip>
                                </div>
                                <div v-else-if="fruit == 'main_image'">
                                    <!-- 商品缩略图 -->
                                    <div style="height:30px;">
                                        <el-image v-if="scope.row.main_image"
                                            style="width: 30px; height: 30px;border-radius: 5px;"
                                            :src="scope.row.main_image" />
                                        <div v-else>-</div>
                                    </div>
                                </div>
                                <div v-else-if="fruit == 'status'">
                                    <span :style="{ 'color': scope.row.status == 1 ? '#67C23A' : '#F56C6C' }">{{
                                        scope.row.status == 1
                                        ? '启用' : '禁用' }}</span>
                                </div>
                                <div v-else>
                                    {{ scope.row[fruit] }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" align="center" width="100" prop="address" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="addSelectedGoodsWay(scope.row)">加入选品库</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: right;margin-top: 10px;">
                        <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]"
                            :page-size="searchForm.count" layout="total, sizes, prev, pager, next, jumper" :total="total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>
        </el-drawer>
        <rule v-if="ifshowrule" :title="ruletitle"></rule>
    </div>
</template>
<script>
import rule from './rule.vue'
import {
    goodslist,
    supplierLists,
    getGoodsProductList,
    GoodsCateList,
    getSupplierGoodsInfo,
} from "@/api/supplier/index";
// 全部表头选项
const tableTheadOption = {
    id: { label: "ID", field: "id", minwidth: '80px' },
    shid: { label: "商户id", field: "shid", minwidth: '80px' },
    supplier_name: { label: "供货商", field: "supplier_name", minwidth: '150px' },
    goods_name: { label: "商品名称", field: "goods_name", minwidth: '200px' },
    inventory: { label: "产品类型", field: "inventory", minwidth: '200px' },
    product_code: { label: "商品编号", field: "product_code", minwidth: '150px' },
    main_image: { label: "商品缩略图", field: "main_image", minwidth: '100px' },
    cost_price: { label: "成本价", field: "cost_price", minwidth: '150px' },
    retail_price: { label: "零售价", field: "retail_price", minwidth: '150px' },
    CountRepertory: { label: "库存", field: "CountRepertory", minwidth: '100px' },
    status: { label: "生效状态", field: "status", minwidth: '100px' },
    created_at: { label: "创建时间", field: "created_at", minwidth: '100px' },
}
//全部表头
const allTableThead = ['id', 'shid', 'supplier_name', 'goods_name', 'inventory', 'product_code', 'main_image', 'cost_price', 'retail_price', 'CountRepertory', 'status', 'created_at']
//默认表头
const defaultTableThead = ['id', 'supplier_name', 'goods_name', 'inventory', 'product_code', 'main_image', 'cost_price', 'CountRepertory']
export default {
    name: "detail",
    props: [
        "title",
    ],
    components: {
        rule,
    },
    data() {
        return {
            //drawer默认打开
            drawer: true,
            //查询
            searchForm: {
                page: 1,
                count: 10,
            },
            // 供货商列表
            supplierList: [],
            //商品类目列表
            typeList: [
                { value: 1, label: "普通商品", },
                { value: 2, label: "卡密商品", },
                { value: 3, label: "虚拟商品", },
            ],
            //是否展开余下查询
            ifShowSearch: false,
            // 动态显示表头默认表头
            tableTheadOptions: tableTheadOption,//表头选项
            allTableThead: allTableThead,//全部表头
            tableThead: defaultTableThead, // 默认表头
            checkboxTableThead: defaultTableThead, // 默认表头值
            tableKey: 1, // 为了保证table 每次都会重渲
            tableHeight: this.calculateTableHeight(), // 初始化表格高度
            //表格加载
            loading: false,
            //列表
            tableList: [],
            //总条数
            total: 0,
            //是否显示文字提示内容
            isShowTooltip: false,

            ifshowrule:false,
            ruletitle:'',
        };
    },
    mounted() {
        // 监听窗口大小变化，实时更新表格高度
        window.addEventListener('resize', this.handleResize);
        //获取供货商列表
        this.getSupplierLists();
        //获取商品列表
        this.getSupplierListWay();

    },
    watch: {
        //监听表头变化
        checkboxTableThead(valArr) {
            this.tableThead = this.allTableThead.filter(
                (i) => valArr.indexOf(i) >= 0
            );
            this.tableKey = this.tableKey + 1;
        },
    },
    methods: {
        // 关闭当前抽屉
        closeCurrentDrawer() {
            this.$parent.closeDrawer();
        },
        // 窗口大小变化时重新计算表格高度
        handleResize() {
            this.tableHeight = this.calculateTableHeight();
        },
        // 根据实际需求计算表格高度
        calculateTableHeight() {
            return window.innerHeight - 136;
        },
        //单元格内容超出，显示文字提示内容
        onMouseOver(str) {
            const tag = this.$refs[str][0]
            const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
            const contentWidth = tag.offsetWidth // 获取元素可视宽度
            this.isShowTooltip = contentWidth <= parentWidth
        },
        // 获取供货商列表
        async getSupplierLists() {
            const res = await supplierLists();
            const { code, data, message } = res;
            if (code === 200) {
                this.supplierList = data;
            } else {
                this.$message.error(message);
            }
        },
        // 重置选品列表搜索
        resetSearch() {
            this.searchForm = this.$options.data().searchForm;
            this.getSupplierListWay();
        },
        // 获取选品列表
        async getSupplierListWay() {
            this.loading = true;
            const res = await goodslist(this.searchForm);
            const { code, data, message } = res;
            if (code === 200) {
                data.list.forEach((item) => {
                    item.gc_id = "";
                });
                this.tableList = data.list;
                this.total = res.data.total;
            } else {
                this.$message.error(res.msg);
            }
            this.loading = false;
        },
        // 商户分类切换分页
        handleCurrentChange(val) {
            this.searchForm.page = val;
            this.getSupplierListWay();
        },
        // 商户分类切换每页数量
        handleSizeChange(val) {
            this.searchForm.count = val;
            this.getSupplierListWay();
        },
        //加入选品库
        addSelectedGoodsWay(row) {
            this.ruletitle = '配置选品规则';
            this.ifshowrule = true;
            // this.configurationDialog = true;
            // this.addLoding = true;
            // getSupplierGoodsInfo({ id: row.id }).then((res) => {
            //     this.SKUform.goodsName = res.data.goods_name;
            //     this.SKUform.sku_name = res.data.goods_product[0].sku_name;
            //     this.SKUform.sku_Img_Url = res.data.goods_product[0].sku_img;
            //     this.SKUform.id = res.data.goods_product[0].id;
            //     this.SKUform.take_delivery_price =
            //         res.data.goods_product[0].retail_price;
            //     this.addLoding = false;
            // });
        },
        //关闭配置选聘规则抽屉
        closeDrawer() {
            this.ifshowrule = false;
            // this.doSearchGoods();
        },

    },
};
</script>
<style lang="scss">
.drawer-layout {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    // .el-drawer__body {
    //     overflow: auto;
    // }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
        display: none;
    }

    .el-drawer__header {
        background-color: #409eff;
        color: #ffffff;
        padding: 10px 20px;
        margin-bottom: 10px;
    }

    // .el-alert--warning.is-light .el-alert__description {
    //     color: #c77b04;
    //     font-size: 14px;
    // }

    // .form-box-item {
    //     .el-form-item__label {
    //         font-size: 14px;
    //         font-weight: 500;
    //         // width: 96px;
    //     }

    //     .el-input {
    //         width: 250px;
    //     }
    // }
}
</style>
<style lang="scss" scoped>
.layout {
    padding: 10px 20px;

    // 筛选样式
    .searchForm {
        display: flex;

        .SearchBtn {
            display: flex;
            justify-content: flex-end;
        }
    }

    // 筛选超出隐藏
    .overoverflow-hidden {
        height: 50px;
        overflow: hidden;

    }
}



.blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
}

.form-box {
    margin: 0 20px;

    .form-box-item {
        // padding-bottom: 10px;
        padding-right: 20px;
        font-size: 12px;
        color: #4c4c4c;

        .form-tip {
            font-size: 12px;
            color: #4c4c4c;

            .tip-key {
                font-weight: bold;
                text-decoration: underline;
            }
        }

        .form-product {
            display: flex;
            font-size: 12px;
            color: #ee3737;
        }

        .Instructions {
            background: #f6f6f6;
            border-radius: 4px;
            padding: 10px;
        }
    }

    .table-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .table-top-left {
            display: flex;

            div {
                margin-right: 20px;
            }
        }

        .table-top-right {
            display: flex;

            div {
                margin-left: 20px;
            }
        }
    }

    .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
    }
}

.button-box {
    margin-left: 30px;
    margin-bottom: 20px;

    .next-button {
        background-color: #eeeeee;
        color: #4c4c4c;
        height: 30px;
    }
}
</style>